<template>
	<view class="jsfun-picker">
		<slot></slot>
		<!-- 遮罩层 -->
		<view class="mask" @tap.stop="closePicker" catchtouchmove="true" v-if="isShow"></view>
		<!-- 多选控件 -->
		<view class="picker" :class="{'pickerShow':isShow}" catchtouchmove="true">
			<!-- 标题 -->
			<view class="title">
				<text class="cancel" @tap.stop="closePicker">取消</text>
				<text class="ok" @tap.stop="okClick">确定</text>
			</view>
			<!-- 数据列表 -->
			<view class="list" v-if="listArr.length>0">
				<view v-for="(item,index) in listArrNew" :key="index" @tap.stop="itemClick(item)"
					:class="{'active':item.select}">{{item.name}}</view>
			</view>
			<view class="list" v-else>
				未接收到数据
			</view>
			<!-- 底部说明 -->
			<view class="mess" v-if="mess">
				{{mess}}
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		name: 'jsfun-picker',
		props: {
			mess: String, //备注说明
			listArr: { //数据
				type: Array,
				default () {
					return [];
				}
			},
			defaultArr: { //默认选中的内容
				type: String,
				default: ''
			},
			type: { //多选 单选  multiple single 
				type: String,
				default: 'single'
			},

			// disabled: { //是否为禁用状态
			// 	type: [String, Boolean],
			// 	defalut: false
			// },
		},
		data() {
			return {
				listArrNew: {}, //记录选中的内容
				isShow: false,
			}
		},
		watch: {
			//这里需要监听默认值的改变，重新初始化
			defaultArr(val) {
				console.log(val);
				this.initValue();
			}
		},
		methods: {
			showPicker() {
				this.initValue();
				setTimeout(() => {
					this.isShow = true;
				}, 100);
			},
			//关闭
			closePicker() {
				this.isShow = false;
				//点遮罩 点取消关闭说明用户不想修改，所以这里对数据进行初始化
				this.initValue();
			},
			//组件数据初始化  进入时、关闭时调用初始化
			initValue() {
				//默认值
				let defaultArr = this.defaultArr.split(",");

				//将传进来的数组转成对象使用	
				var temp = {}
				for (let item in this.listArr) {
					let defalutSelect = false;
					if (defaultArr.length > 0 && defaultArr.indexOf(this.listArr[item]) != -1) defalutSelect = true;
					temp[item] = {
						index: item,
						name: this.listArr[item],
						select: defalutSelect
					}
				}
				this.listArrNew = temp;
			},
			//选中元素
			itemClick(item) {
				if (item.select) {
					item.select = false
				} else {
					item.select = true
				}
				//如果是单选需要清除其选中的项
				if (this.type == "single") {
					for (let item1 in this.listArrNew) {
						var obj = this.listArrNew[item1];
						if (obj.name != item.name) obj.select = false;
					}
				}
			},
			//点击确定
			okClick() {
				var data = {},
					list = {},
					textStr = "",
					indexStr = "";
				for (let item in this.listArrNew) {
					var obj = this.listArrNew[item];
					if (obj.select) {
						list[obj.index] = obj.name
						indexStr += (indexStr == "" ? "" : ",") + obj.index
						textStr += (textStr == "" ? "" : ",") + obj.name
					}
				}
				data['list'] = list
				data['indexStr'] = indexStr
				data['textStr'] = textStr

				this.$emit('click', data)
				//确定后更新默认初始值,这样再次进入默认初值就是最后选择的
				this.defaultArr = textStr;
				//关闭
				this.closePicker();
			}
		}
	}
</script>

<style lang="scss">
	.jsfun-picker {

		.mask {
			position: fixed;
			z-index: 1000;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			height: 100vh;
			background: rgba(0, 0, 0, 0.6);
		}



		.picker {
			transition: all .3s ease;
			transform: translateY(100%);

			&.pickerShow {
				transform: translateY(0);
			}

			position: fixed;
			z-index: 1000;
			right: 0;
			left: 0;
			bottom: 0;
			background: #fff;
			color:#666;
			min-height: 60vh;

			.title {
				display: flex;
				justify-content: space-between;
				border-bottom: solid 1px #efefef;
				padding: 0upx 30rpx;
				line-height: 114rpx;
				font-size: 34rpx;
				font-weight: bold;

				//确定按钮颜色
				.ok {
					color: blue;
				}
			}

			.list {
				padding: 0upx 10upx;
				margin: 20upx 0upx;
				display: flex;
				flex-flow: wrap;

				justify-content: center;

				//列表元素样式
				view {
					background: #efefef;
					text-align: center;
					margin: 11rpx;
					padding: 30rpx;
					height: 35rpx;
					min-width: 35rpx;
					font-size: 28rpx;
					font-weight: 600;
					border-radius: 50%;
					color: #777;
				}

				//列表元素选中的样式
				.active {
					background: blue;
					color: #fff;
				}
			}

			.mess {
				padding: 0upx 20upx;
				margin-bottom: 20upx;
				text-align: left;
			}
		}

	}
</style>
